<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>this</title>
</head>

<body>

    <button>单击</button>

    <script>
        // 1.普通函数
        function fn() {
            console.log(this);  //this指向 window
            console.log('ok');
        }
        //调用方式  函数名(实参列表)
        // 函数名(实参列表) <=> window.函数名(实参列表)
        fn();

        // 2.对象的方法
        var obj = {
            sayHi: function () {
                console.log(this);// this指向对象自己
                console.log('ok');
            }
        }
        //调用方法式 对象名.方法名（实参列表）
        obj.sayHi();

        // 3.事件处理函数
        document.querySelector('button').onclick = function () {
            console.log(this);  // this指向事件源（按钮）
            console.log('单击');
        }
        //调用方式  事件触发了，事件处理函数得到执行

        //4.定时器函数
        window.setTimeout(function () {
            console.log(this);  // this指向window
            console.log('time');
        }, 1000);
        //调用方式   定时时间到了，定时器对象自动调用定时器函数

        // 5.构造函数
        function Person(name, age) {
            this.name = name;
            this.age = age;
            console.log(this);  // this指向new 出来的对象
        }
        //调用方式  new 构造函数名（实参列表）
        // var person = new Person('zs', '18')
        new Person('zs', '18');


        // 6.立即执行函数
        (function () {
            console.log(this);  //this指向window
            console.log('run');
        })()
        //调用方式  立即执行

    </script>
</body>

</html>